<template>
  <div class="app-container">
    <h2 style="text-align: center">添加历史事件</h2>

    <el-steps
      :active="2"
      process-status="wait"
      align-center
      style="margin-bottom: 40px"
    >
      <el-step title="事件基本信息" />
      <el-step title="事件经过" />
      <el-step title="事件总结" />
    </el-steps>

    <!--  style="padding-top: 20px" -->
    <el-form label-width="120px">
      <el-form-item label="事件类型">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <div style="margin: 15px 0"></div>
        <el-checkbox-group
          v-model="checkedforms"
          @change="handleCheckedFromsChange"
        >
          <el-checkbox v-for="form in forms" :label="form" :key="form">{{
            form
          }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="事件描述">
        <el-input
          v-model="eventDesc.description"
          maxlength="200"
          type="textarea"
          placeholder="请输入事件描述"
          show-word-limit
          clearable
          :rows="10"
        />
      </el-form-item>

      <el-form-item align="right">
        <el-button @click="previous">上一步</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next">{{
          btuTitle
        }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import events from "@/api/event/events";
import history_type from '@/api/option/history_type'
// const formOptions = ["军事事件", "政治事件", "文化事件"];
export default {
  data() {
    return {
      saveBtnDisabled: false, // 保存按钮是否禁用
      eventId: "", //事件id
      eventDesc: {
        id: "",
        description: "",
        types: "",
      }, //事件经过
      checkedforms: [],
      forms: [],
      isIndeterminate: true,
      checkAll: false,
      btuTitle: "下一步",
      hasPermission: true, //是否有权限
    };
  },

  created() {
    this.getEventTypes()
    if (this.$route.params && this.$route.params.id) {
      // params.id 中 id 和路由中的 占位符有关系
      this.eventId = this.$route.params.id;
      this.getDescInfo();
    }
    this.hasPermission = this.hasPerm("event.addSummary");
    if (!this.hasPermission) {
      this.btuTitle = "保存";
    }
  },

  methods: {
    getEventTypes(){
      history_type.getEventTypes().then(res=>{
        const types = res.data.eventTypes
        types.forEach(item=>{
          this.forms.push(item.etype)
        })
      })
    },
    // 上一步
    previous() {
      const pushPath = "/event/event/";
      this.saveOrUpdateDesc(pushPath);
    },
    // 下一步
    next() {
      const pushPath = "/event/summary/";
      this.saveOrUpdateDesc(pushPath);
    },
    saveOrUpdateDesc(pushPath) {
      this.eventDesc.id = this.eventId;
      var str = "";
      if (this.checkedforms.length > 0) {
        this.checkedforms.forEach((item) => {
          str = str + item + ",";
        });
        str = str.slice(0, str.length - 1);
      }
      this.eventDesc.types = str;

      this.$confirm("是否保存?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          events.saveOrUpdateDesc(this.eventDesc).then((res) => {
            this.$message({
              type: "success",
              message: res.message,
            });
            if (this.hasPermission) {
              // 跳转到第二步
              this.$router.push({ path: pushPath + this.eventId });
            } else {
              this.$router.push({ path: "/event/list" });
            }
          });
        })
        .catch(() => {
          if (this.hasPermission) {
            // 跳转到第二步
            this.$router.push({ path: pushPath + this.eventId });
          } else {
            this.$router.push({ path: "/event/list" });
          }
        });
    },
    getDescInfo() {
      events.getDescInfo(this.eventId).then((res) => {
        this.eventDesc.description = res.data.desc;
        if (res.data.forms.length > 0) {
          this.checkedforms = res.data.forms;
        }
      });
    },

    handleCheckAllChange(val) {
      this.checkedforms = val ? formOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedFromsChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.forms.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.forms.length;
    },
  },
};
</script>

<style scoped>
</style>>
